<template>
  <div class="article">
    <!-- 返回导航，文章标题 -->

    <template v-if="article && article.original_status">
      <van-nav-bar
        :placeholder="true"
        :fixed="true"
        :title="article && article.original_status.title"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />
      <div class="cell-header">
        <van-image
          width="30"
          height="30"
          :src="
            article.original_status.user.photo_domain +
            article.original_status.user.profile_image_url.split(',')[0]
          "
        />
        <div class="right-header">
          <div class="author">
            {{ article.original_status.user.screen_name }}
          </div>
          <div class="pubtime">{{ article.original_status.timeBefore }}</div>
        </div>
      </div>
      <div
        class="content"
        v-html="article.original_status && article.original_status.text"
      ></div>
    </template>

    <template v-if="articleCache.original_status">
      <van-nav-bar
        :title="articleCache && articleCache.original_status.title"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />
      <div class="cell-header">
        <van-image
          width="30"
          height="30"
          :src="
            articleCache.original_status.user.photo_domain +
            articleCache.original_status.user.profile_image_url.split(',')[0]
          "
        />
        <div class="right-header">
          <div class="author">
            {{ articleCache.original_status.user.screen_name }}
          </div>
          <div class="pubtime">
            {{ articleCache.original_status.timeBefore }}
          </div>
        </div>
      </div>
      <div
        class="content"
        v-html="
          articleCache.original_status && articleCache.original_status.text
        "
      ></div>
    </template>

    <!-- 评论 -->
    <div class="comments">
      <h5>评论</h5>
      <div class="comment-list">
        <div class="comment-item" v-for="(comment, i) in comments" :key="i">
          <div class="cell-header">
            <van-image
              round
              width="30"
              height="30"
              :src="
                comment.user.photo_domain +
                comment.user.profile_image_url.split(',')[0]
              "
            />
            <div class="right-header">
              <div class="author">
                {{ comment.user.screen_name }}
              </div>
            </div>
          </div>
          <p class="txt" v-html="comment.text"></p>
        </div>
      </div>
    </div>
    <div class="input-comment">
      <van-field
        v-model="commentValue"
        rows="2"
        autosize
        label="评论"
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
      />
    </div>
    <div class="btn-comment">
      <van-button
        class="btn"
        type="info"
        block
        size="small"
        @click="commitComment"
        >提交评论</van-button
      >
    </div>
  </div>
</template>

<script>
import * as api from "@/api/index";
import { Toast } from "vant";
export default {
  data() {
    return {
      //   article: {},
      articleCache: {},
      comments: [],
      commentValue: "",
    };
  },
  props: ["article"],
  methods: {
    goBack() {
      //   console.log(this.$router);
      //   this.$router.go(-1);
      this.$router.back();
    },
    async getComments() {
      let result = await api.getArticleComments({ id: this.$route.params.id });
      this.comments = result.comments;
      if (result.result == "ok") {
        Toast.success("评论成功");
      }
    },
    async commitComment() {
      if (this.$store.state.user && this.$store.state.user.token) {
        let result = await api.postArticleComment({
          id: this.$route.params.id,
          commentValue: this.commentValue,
        });
      } else {
        Toast.fail("尚未登录，请登录后评论");
        this.$router.push("/login");
      }

      //   console.log(result);
    },
  },
  mounted() {
    // console.log(this);
    // this.article = this.$route.params.article;
    let articles = {};
    if (this.article) {
      articles[this.article.id] = this.article;
      sessionStorage.articles = JSON.stringify(articles);
    } else {
      if (sessionStorage.articles) {
        articles = JSON.parse(sessionStorage.articles);
        this.articleCache = articles[this.$route.params.id];
      } else {
        // 服务器请求文章数据
        // 请求数据覆盖articleCache
        // 顺带缓存到sessionStorage.articles
      }
    }
    this.getComments();
  },
  activated() {
    let articles = {};
    if (this.article) {
      articles[this.article.id] = this.article;
      sessionStorage.articles = JSON.stringify(articles);
    } else {
      if (sessionStorage.articles) {
        articles = JSON.parse(sessionStorage.articles);
        this.articleCache = articles[this.$route.params.id];
      } else {
        // 服务器请求文章数据
        // 请求数据覆盖articleCache
        // 顺带缓存到sessionStorage.articles
      }
    }
    this.getComments();
  },
};
</script>

<style scoped lang="less">
.cell-header {
  padding: 0.2rem;
  display: flex;
  height: 1rem;
  .right-header {
    font-size: 0.3rem;
    line-height: 0.4rem;
    padding-left: 0.2rem;
    .pubtime {
      color: #999;
    }
  }
}

.content {
  padding: 0 0.4rem 1.2rem;
  ::v-deep p {
    color: #666;
    font-size: 0.4rem;
  }
  ::v-deep img {
    max-width: 100%;
  }
}
.comment-item {
  background: #efefef;
  margin: 0.2rem;
  border-radius: 0.2rem;
}
.cell-header {
  display: flex;
  height: 1rem;
  align-items: center;
  .right-header {
    font-size: 0.3rem;
    line-height: 0.4rem;
    padding-left: 0.2rem;
  }
}
.txt {
  color: #666;
  font-size: 0.4rem;
  padding: 0 0.4rem 0.2rem;
  margin: 0;
}
.comments h5,
.btn-comment {
  margin: 0.2rem;
}
.btn {
  margin: 0.2rem 0;
}

.input-comment {
  margin: 0.2rem;
  border: 1px solid skyblue;
  border-radius: 0.2rem;
}
</style>
